<template>
  <view class="vision">
    <view class="box">
    <view class="box_text">
      <text></text>
      <text class="text">温馨提示：具体病症即检查结果以医院出具检查报告为准</text>
    </view>
    <view class="scroll">
    <view class="question-container" v-for="(question, index) in state.questions" :key="index"> 
      <text class="question">{{ index+1 }}.{{ question.content }}</text>
      <view class="border"></view>  
      <radio-group class="radio-group" @change="handleRadioChange(index, question,$event.target.value)">  
        <label class="radio-label" v-for="(option,index_option) in options" :key="option.value">  
          <radio :value="option.value"/>
          <text>{{ option.label}}</text>
        </label>  
      </radio-group>  
    </view>
    <view v-if="isView" class="advise">
      <text>建议医生检查骨密度</text>
    </view>
    <view class="picker_box" v-if="isView">
      <picker mode="selector" :range="range" @change="pickerChange" >
        <text class="question1">请填写骨密度</text>
        <text class="picker" >{{'（'+ range[selectedVision] +'）'}}</text>
      </picker>
    </view>
    </view>
    </view>
    <view class="foot_box">
      <view class="foot-container">
        <text class="foot1" @tap="back">上一步</text>
        <text class="foot2">5/8</text>
        <text class="foot3" @tap="next">下一步</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getCalciumListApi,postCalciumApi} from '@/apis/calcium/calcium'
import { useMarkStore } from '@/stores/modules/mark';
const useMark = useMarkStore()
/* const uuid = ref(0)
const uuid1 = ref(0)
const uuid2 = ref(0)
const getUuid =async ()=>{
 const res = await wx.getRandomValues({length: 12 })
 uuid.value = wx.arrayBufferToBase64(res.randomValues)
 const res1 = await wx.getRandomValues({length: 12 })
 uuid1.value = wx.arrayBufferToBase64(res.randomValues)
 uuid2.value=uuid1.value+uuid.value
 console.log('uuid:',uuid2.value)
} */
const back = ()=>{
 uni.navigateBack()
}
const next =async ()=>{//提交
  if(selected[0].result===0)
  {
    selected[0].content=range[selectedVision.value]
    console.log('我是补钙',selected)
  }
   const res = await postCalciumApi(selected) 
   console.log('补钙：',res.msg)
 uni.navigateTo({ url: '/pages/fallRiskList/components/foot/foot'})
}
const state = reactive({
  questions:[]
})
const options = reactive([
  {value:'yes',label:'是'},
  {value:'no',label:'否'}
])
const isView = ref(false)
const range = []
const selectedVision= ref(0)
for(let i=4.0;i<=5.3;i+=0.1)//picker数组
{
  let roundedValue = Math.round(i * 10) / 10;  
    range.push(roundedValue); 
}
const pickerChange = (e)=>{//picker改变触发回调函数
  selectedVision.value = e.detail.value
}
const selected = []
const handleRadioChange = (index,question,targetValue)=>{//radio框的值改变触发回调函数
  if(targetValue==='yes')
  {
    isView.value = false
    selected[index].result=1
  }
  else{
    isView.value = true
    selected[index].result=0
  }
}
const setSelected = ()=>{
  for(let i=0;i<state.questions?.length;i++)
{
  selected.push({mark:useMark.mark,tsBaseCalciumId:state.questions[i]?.id,result:0})
}
console.log('我是seleted',selected) 
}
const getCalciumList = async ()=> {//获得vision题库
  const res = await getCalciumListApi()
  console.log('我是自评表数据',res.data)
  state.questions=res.data
  if(res.code===200){
     setSelected()
  }
  console.log(state.questions,'我是返回的表数据')
}
onLoad(async()=>{
  getCalciumList()
})
</script>

<style lang="scss">
page {
 background-color: rgb(10,127,255);
}
.vision{
 height:100vh;
 position: relative;
 .box{
   margin: 30rpx;
   border-radius: 20rpx;
   background-color: #fff;
   padding: 0;
  height: 95%;
  .box_text{
    padding-top: 30rpx;
    .text{
  font-size: 25rpx;
  color:red;
  margin-left: 50rpx;
}
  }
  .scroll{
    margin-top: 30rpx;
.question-container {  
  font-size: 28rpx;
  margin-bottom: 40rpx;/* 每个问题之间的间距 */  
.question {   
  margin-bottom: 40rpx; 
  margin-left: 50rpx;
}  
.border{
  height: 3rpx;
  width: 600rpx;
  background-color: #eee;
  margin-top: 20rpx;
  margin-left: 50rpx;
  margin-bottom: 15rpx;
}
.radio-group {   
  margin-left: 50rpx;
.radio-label {   
  padding-top: 30rpx; 
  padding-right: 200rpx; 
}  
}
}
.advise{
  font-weight: bold;
  color: rgb(0,111,255);
  margin-top: 25rpx;
  margin-left: 50rpx;
  margin-bottom: 25rpx;
  font-size: 30rpx;
}
.picker_box{
  font-size: 30rpx;
  background-color: rgb(240,247,255);
  margin-left: 25rpx;
  margin-right: 25rpx;
  border-radius: 15rpx;
  height: 150rpx;
  display: flex;
  align-items: center;
  .question1{
    color: black;
    font-weight: 600;
    margin-left: 40rpx;
    margin-right: 25rpx;
  }
  .picker{
    color: rgb(0,111,255);
  }
}
}
}
.foot_box{
    position:fixed;
    bottom: 2rpx;
    height: 100rpx;
    width: 100%;
    background-color: #fff;
    .foot-container{
      margin: 15rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .foot1, .foot2, .foot3{
        font-size: 35rpx;
        color: black;
      }
      .foot2{
        text-align: center;
      }
    }
  }
}

</style>